●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Horizontal, scrollable featured songs row (card scroller).
- Genre section (Hip-Hop) with vertical list entries and action icons.
- Persistent bottom navigation bar using MudAppBar.
- Image cards with overlay play button, metadata (play count, duration), artist avatar and version chips.
- Small utility methods for play count and duration formatting.
## Key components
- MudLayout, MudContainer, MudAppBar
- MudCard, MudImage, MudIconButton, MudButton
- MudText, MudChip, MudAvatar, MudStack
- C# model: SongModel
- Razor lifecycle: OnInitialized
## How it works
- Static sample data is populated in OnInitialized into _featuredSongs and _hipHopSongs lists (SongModel instances).
- UI binds directly to those lists and renders repeatable blocks with foreach loops; no @bind-* inputs are present.
- Interaction points use MudIconButton and MudButton for play, like, share and navigation; event handlers are not wired to services in this snapshot.
- FormatPlayCount and FormatDuration provide view-side formatting for display values.
## Styling
- Uses MudBlazor components for structure and controls (theme-aware colors and variants).
- Tailwind utility classes appear throughout (flex, space-x-*, truncate, text-gray-400, -mx-4, overflow-x-auto) to control layout and spacing.
- Custom CSS (scrollbar-hide) hides horizontal scrollbar for a cleaner scroller on supported browsers.
- Layout targets a mobile-first, dark theme feel with responsive stacking via flex and fixed bottom app bar.
## Reuse steps
1. Add MudBlazor NuGet and register services in Program.cs (builder.Services.AddMudServices()).
2. Include MudBlazor CSS and a Tailwind or PostCSS build (or adapt Tailwind classes to project CSS).
3. Add SongModel.cs and place the Razor page under Pages; preserve @page route.
4. Include the scrollbar-hide CSS in site styles or component stylesheet.
5. Wire play/share actions to an audio service, navigation manager, or API for real data.
## Limitations & next steps
- This is a single page scaffold generated by Instruct UI with in-memory sample data; backend API, authentication, and state management are not implemented.
- No audio playback or player state is included; integrate a playback service and manage global player state (singleton service or state container).
- Consider lazy-loading or virtualization for long lists, responsive image sizes, and accessibility (keyboard focus, ARIA labels).
- Replace placeholder images/URLs with CDN or blob storage and add pagination or infinite scroll for larger catalogs.